<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.js"></script>
    <style>
        .sub, .add {
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: grey;
            color: #ffffff;
            text-align: center;
            line-height: 30px;
        }

        li {
            padding: 10px;
            list-style: none;
        }
    </style>
    <script>
        $(function () {
            $(".sub").click(function () {
                //获得当前元素前面的单击
                let price = parseFloat($(this).prev().text().substring(1));
                let v = $(this).next().val();
                let sumPrice = $(this).parent().find(".sumPrice");
                v--;
                if (v <= 0) {
                    if (confirm("要删除吗？")) {
                        $(this).parent().remove();
                    } else {
                        v = 1;
                    }
                }
                sumPrice.html("$" + (price * v))
                $(this).next().val(v);
                calculateTotalPrice();
            });

            $(".add").click(function () {
                //获得当前元素前面的单击F
                let price = parseFloat($(this).parent().find(".price").text().substring(1));
                console.log(price)
                let v = $(this).prev().val();
                let sumPrice = $(this).parent().find(".sumPrice");
                v++;
                sumPrice.html("$" + (price * v))
                $(this).prev().val(v);
                calculateTotalPrice();
            });

            function calculateTotalPrice() {
                let sum = 0;
                $(".sumPrice").each(function () {
                    let txt = parseFloat(this.innerHTML.substring(1));
                    sum += txt;
                });
                $(".totalPrice").html("$" + sum.toFixed(2));
            }
        })
    </script>
</head>
<body>
<li>
    <span class="price">$29.5</span>
    <span class="sub">-</span>
    <input class="num" type="text" value="5"/>
    <span class="add">+</span>
    <span class="sumPrice">$29.5</span>
</li>
<li>
    <span class="price">$29.5</span>
    <span class="sub">-</span>
    <input class="num" type="text" value="1"/>
    <span class="add">+</span>
    <span class="sumPrice">$29.5</span>
</li>
<li>
    <span class="price">$29.5</span>
    <span class="sub">-</span>
    <input class="num" type="text" value="1"/>
    <span class="add">+</span>
    <span class="sumPrice">$29.5</span>
</li>
<li>
    <span class="price">$29.5</span>
    <span class="sub">-</span>
    <input class="num" type="text" value="1"/>
    <span class="add">+</span>
    <span class="sumPrice">$29.5</span>
</li>
<p class="totalPrice">$300.0</p>
</body>
</html>
